{% extends 'base.html' %}
{% block title %}
    个人中心
{% endblock %}
{% block css %}
    <style>

        #addmain {
            display: none;
        }

    </style>
{% endblock %}
{% block middle %}
    {% csrf_token %}
    <div class="layui-layout layui-layout-admin">
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="docDemoTabBrief">
                    <li class="layui-nav-item layui-nav-itemed">
                        <dd class="layui-this">
                            <a href="javascript:;">活动</a>
                        </dd>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">参与的活动</li>
                    <li>申请的活动</li>
                    <li>活动名单导出</li>
                    <button class="layui-btn layui-btn-sm pull-right" onclick="check()" style="margin: 4px 5px 0 0">
                        点击申请活动
                    </button>
                </ul>
                <div class="layui-tab-content" style="height: 600px;">
                    <div class="layui-tab-item layui-show">
                        <table class="layui-hide" id="table1"></table>
                    </div>
                    <div class="layui-tab-item">
                        <table class="layui-hide" id="table2"></table>
                    </div>
                    <div class="layui-tab-item">
                        <table class="layui-hide" id="table3" lay-filter="table3"></table>
                        <script type="text/html" id="barDemo">
                            <a class="layui-btn layui-btn-xs" lay-event="export">导出</a>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {#    模态框#}
    <div id="addmain" style="padding: 10px">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">活动主题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required placeholder="活动主题"
                           autocomplete="off" class="layui-input" lay-verify="title" id="title">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label" style="width: 100px">活动描述</label>
                <div class="layui-input-block">
                    <textarea name="desc" placeholder="活动描述" class="layui-textarea" lay-verify="desc"
                              id="desc"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 130px">报名开始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="date" id="enroll_starttime" lay-verify="enroll_starttime"
                               placeholder="报名时间日期"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 130px">报名结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="date" id="enroll_endtime" lay-verify="enroll_endtime"
                               placeholder="报名时间日期"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 130px">活动开始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="date" id="act_starttime" lay-verify="act_starttime"
                               placeholder="活动时间日期"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 130px">活动结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="date" id="act_endtime" lay-verify="act_endtime"
                               placeholder="活动时间日期"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">报名人数</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="number" placeholder="报名人数"
                           autocomplete="off" class="layui-input" id="number">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">活动地点</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="place" placeholder="活动地点"
                           autocomplete="off" class="layui-input" id='place'>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="*">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block js %}
    {#    表格#}
    <script>
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#table1'
                , url: '/stu_active/'
                , method: 'get'
                , cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    {field: 'id', width: 80, title: 'ID'}
                    , {field: 'title', title: '活动主题'}
                    , {field: 'enrolltime', title: '报名时间'}
                    , {field: 'acttime', title: '活动时间'}
                    , {field: 'number', title: '报名人数'}
                    , {field: 'place', title: '活动地点'}
                    , {field: 'club', title: '承办社团', sort: true}
                    , {field: 'status', title: '活动状态', sort: true}
                ]]
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    , groups: 1 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页

                }
                , parseData: function (res) { //res 即为原始返回的数据
                    console.log(res)
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
            });

            table.render({
                elem: '#table2'
                , url: '/reg_active1/'
                , method: 'get'
                , cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    {field: 'id', width: 80, title: 'ID'}
                    , {field: 'title', title: '活动主题'}
                    , {field: 'desc', title: '活动描述'}
                    , {field: 'status', title: '申请状态', sort: true}
                ]]
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    , groups: 1 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页

                }
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
                , text: {
                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
            });

            table.render({
                elem: '#table3'
                , url: '/reg_active2/'
                , method: 'get'
                , cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    {field: 'id', width: 80, title: 'ID'}
                    , {field: 'title', title: '活动主题'}
                    , {field: 'desc', title: '活动描述'}
                    , {field: 'status', title: '活动状态', sort: true}
                    , {fixed: 'right', title: '导出', toolbar: '#barDemo', width: 150}
                ]]
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    , groups: 1 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页

                }
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
                , text: {
                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
            });

            table.on('tool(table3)', function (obj) {
                var data = obj.data;
                var tr = obj.tr;
                var id = tr.find('td[data-field="id"]');
                if (obj.event === 'export') {
                    layer.confirm('确定导出吗', function (index) {
                        if (index) {
                            var da = {
                                'id': id.text(),
                                'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()
                            }
                            $.ajax({
                                url: '/export/',
                                type: 'post',
                                data: da,
                                success: function (data) {
                                        alert(data.msg)
                                }
                            })
                        }
                        layer.close(index);
                    });
                }
            });
        });
    </script>
    {#    模态框#}
    <script type="text/javascript">
        /*弹出模态框*/
        function check() {
            layer.open({
                type: 1,
                title: '活动信息',
                area: ['800px', '600px'],
                shadeClose: false, //点击遮罩关闭
                content: $('#addmain'),
                end: function () {
                    $('#addmain').css("display", "none");
                }
            });
        }

        layui.use('form', function () {
            var form = layui.form;
            form.on('submit(*)', function (data) {
                var da = {
                    'title': $('#title').val(),
                    'desc': $('#desc').val(),
                    'enroll_starttime': $('#enroll_starttime').val(),
                    'enroll_endtime': $('#enroll_endtime').val(),
                    'act_starttime': $('#act_starttime').val(),
                    'act_endtime': $('#act_endtime').val(),
                    'number': $('#number').val(),
                    'place': $('#place').val(),
                    'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()
                }

                $.ajax({
                    url: '/apply/',
                    type: 'post',
                    data: da,
                    success: function (data) {
                        if (data.status == 100) {
                            alert(data.msg)
                            location.href = '/backend/'
                        }
                        else {
                            alert(data.msg)
                        }
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            form.verify({
                title: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (/^\s*$/.test(value)) {
                        return '不能为空';
                    }
                },
                desc: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (/^\s*$/.test(value)) {
                        return '不能为空';
                    }
                },
                enroll_starttime: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (/^\s*$/.test(value)) {
                        return '不能为空';
                    }
                },
                enroll_endtime: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (/^\s*$/.test(value)) {
                        return '不能为空';
                    }
                },
                act_starttime: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (/^\s*$/.test(value)) {
                        return '不能为空';
                    }
                },
                number: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (/^\s*$/.test(value)) {
                        return '不能为空';
                    }
                },
                act_endtime: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (/^\s*$/.test(value)) {
                        return '不能为空';
                    }
                },
                place: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (/^\s*$/.test(value)) {
                        return '不能为空';
                    }
                }
            });
        });
    </script>
    {#    时间日期选择器#}
    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#act_starttime',
                type: 'datetime'
            });
            laydate.render({
                elem: '#act_endtime',
                type: 'datetime'
            });
            laydate.render({
                elem: '#enroll_starttime',
                type: 'datetime'
            });
            laydate.render({
                elem: '#enroll_endtime',
                type: 'datetime'
            });
        });
    </script>
{% endblock %}